//导入内置模块 path
const path = require('path');
//引入打包 html 文件的插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
////语法 暴露对象
module.exports = {
    //设置入口
    entry: ['./src/js/app.js', './src/index.html'],
    //设置出口 『这里必须要设置成对象』
    output: {
        //文件名称
        filename: 'js/bundle.js',
        //文件夹路径  path 这里需要设置成『绝对路径』
        path: path.resolve(__dirname, 'build'),
        //1. 添加 publicPath  设置所有 url 的前缀
        publicPath: '/'
        
    },
    //模式
    mode: 'development',
    //配置loader
    module: {
        //配置规则
        rules: [
            //针对 css 文件加载规则
            {
                test: /\.css$/,
                use: [
                    //这里的顺序不能变量
                    'style-loader', //将css模块创建一个 style 标签插入文档中
                    'css-loader'  //将 css 文件转化为 commonJS 模块
                ]
            },
            //针对 less 文件加载
            {
                test: /\.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader' // 将 less 转化为 css
                ]
            },
            //针对 js 代码语法检查
            {
                test: /\.js$/,
                exclude: /node_modules/, // 排除 node_modules
                loader: "eslint-loader",
            },
            //针对 js 文件进行语法转换
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
            //针对图片进行处理
            {
                test: /\.(png|jpg|gif)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 10,               		// 8kb以下的图片会 base64 处理
                        outputPath: 'images',           // 文件本地输出路径
                        name: '[hash:12].[ext]',         // 修改文件名称和后缀 
                    }
                }
            },
            //针对HTML中的图片进行处理
            {
                test: /\.(html)$/,
                use: {
                    loader: 'html-loader'
                }
            },
            //针对字体文件进行配置
            {
                test: /\.(eot|svg|woff|woff2|ttf|mp3|mp4|avi)$/,  // 处理字体文件
                loader: 'file-loader',
                options: {
                  outputPath: 'fonts',
                  name: '[hash:8].[ext]'
                }
            }
        ]
    },
    //配置插件
    plugins:[
        new HtmlWebpackPlugin({
            template: './src/index.html', // 设置要编译的 HTML 源文件路径
        })
    ],
    //配置开发服务
    //3. 增加 devServer 配置
    devServer: {
        open: true, 	// 自动打开浏览器
        compress: true, // 启动gzip压缩
        port: 3000, 	// 端口号
        hot: true
    },
    //devtool 配置 
    devtool: 'none'
};
